<template>
  <div>
    <div v-if="accType == 2 || accType == 3">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            退件编号：<a-input
              :maxLength="128"
              v-model="searchData.code"
              allowClear
              style="width: 60%"
            />
          </a-col>
          <a-col :span="6">
            运单号：<a-input
              :maxLength="128"
              v-model="searchData.waybillNm"
              allowClear
              style="width: 60%"
            />
          </a-col>
          <a-col :span="6">
            退至仓库：<a-select
              show-search
              option-filter-prop="children"
              style="width: 60%"
              :filter-option="filterOption"
              v-model="searchData.warehousingId"
              allowClear
            >
              <a-select-option
                :value="item.warehouseId"
                v-for="item in clientWareHouse"
                :key="item.warehouseId"
              >
                {{ item.titleName }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <div v-show="!expand">
              <a-button type="primary" class="searchBtn" @click="search">
                查询
              </a-button>
              <a-button
                style="margin: 0 10px"
                type="primary"
                class="searchBtn"
                @click="resetSearch"
              >
                重置
              </a-button>
              <a
                :style="{ marginRight: '8px', fontSize: '14px' }"
                @click="expand = !expand"
              >
                {{ expand ? "折叠" : "展开" }}
                <a-icon :type="expand ? 'up' : 'down'" />
              </a>
            </div>
            <div v-show="expand">
              创建时间：<a-range-picker
                v-model="acTime"
                @change="onStartDateChange"
                style="width: 60%"
              />
            </div>
          </a-col>
        </a-row>
        <a-row :gutter="24" v-show="expand">
          <a-col :span="6">
            退件处理：<a-select
              v-model="searchData.processType"
              show-search
              option-filter-prop="children"
              style="width: 60%"
              :filter-option="filterOption"
            >
              <a-select-option
                :value="item.code"
                v-for="item in treatmentArray"
                :key="item.code"
                :titles="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <div v-show="expand">
              <a-button type="primary" class="searchBtn" @click="search">
                查询
              </a-button>
              <a-button
                style="margin: 0 10px"
                type="primary"
                class="searchBtn"
                @click="resetSearch"
              >
                重置
              </a-button>
              <a
                :style="{ marginRight: '8px', fontSize: '14px' }"
                @click="expand = !expand"
              >
                {{ expand ? "折叠" : "展开" }}
                <a-icon :type="expand ? 'up' : 'down'" />
              </a>
            </div>
          </a-col>
        </a-row>
      </div>
      <!-- <div class="btn" style="display: flex; margin-top: 10px">
      <div class="news">
        <a-button
          style="margin-right: 15px"
          type="primary"
          class="blueBtn"
          @click="addApply"
        >
          新建退件申请
        </a-button>
      </div>
    </div> -->
      <a-spin tip="Loading..." :spinning="Loading">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane v-if="accType != 3" key="1">
            <span slot="tab">
              <a-badge
                :count="counts === null ? 0 : counts[0].toReceive"
                :offset="[15, 0]"
                >待审核
              </a-badge>
            </span>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">
              <a-badge
                :count="counts === null ? 0 : counts[0].toChConfirmed"
                :offset="[15, 0]"
                >待接收
              </a-badge>
            </span>
          </a-tab-pane>
          <a-tab-pane key="3">
            <span slot="tab">
              <a-badge
                :count="counts === null ? 0 : counts[0].receive"
                :offset="[15, 0]"
                >待确认
              </a-badge>
            </span>
          </a-tab-pane>
          <a-tab-pane key="4">
            <span slot="tab">
              <a-badge
                :count="counts === null ? 0 : counts[0].complete"
                :offset="[15, 0]"
                >已接收
              </a-badge>
            </span>
          </a-tab-pane>

          <a-tab-pane key="5">
            <span slot="tab">
              <a-badge
                :count="counts === null ? 0 : counts[0].cancel"
                :offset="[15, 0]"
                >处理完成
              </a-badge>
            </span>
          </a-tab-pane>
          <a-tab-pane key="6">
            <span slot="tab">
              <a-badge
                :count="counts === null ? 0 : counts[0].cancel"
                :offset="[15, 0]"
                >取消入库
              </a-badge>
            </span>
          </a-tab-pane>
          <a-tab-pane v-if="accType != 3" key="7">
            <span slot="tab">
              <a-badge
                :count="counts === null ? 0 : counts[0].cancel"
                :offset="[15, 0]"
                >审核不通过
              </a-badge>
            </span>
          </a-tab-pane>
          <a-tab-pane v-if="accType != 3" key="8">
            <span slot="tab">
              <a-badge
                :count="counts === null ? 0 : counts[0].cancel"
                :offset="[15, 0]"
                >已关闭
              </a-badge>
            </span>
          </a-tab-pane>
        </a-tabs>

        <Table :tabList="tabList" :tableType="tableType"></Table>
      </a-spin>

      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :current="searchData.current"
            :total="total"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </div>

    <!-- 新增修改框 -->
    <AddEditModal
      ref="AddEditModal"
      :warehouse="clientWareHouse"
      :treatmentArray="treatmentArray"
      :logistics="logistics"
      :tableType="tableType"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { treeTagDictionary } from "@/apis/common";
import {
  by_retreat_applyProcess_type,
  by_retreatApply_Query,
} from "@/apis/clientSide/ReturnsList/ReturnsList";
import Table from "@/components/clientSide/Returns/Table.vue";
import AddEditModal from "@/components/clientSide/Returns/AddEditModal.vue";
export default {
  components: {
    Table,
    AddEditModal,
  },
  data() {
    return {
      accType: sessionStorage.getItem("accType"),
      searchData: {
        code: null,
        waybillNm: null,
        warehousingId: null,
        startCreateTime: null,
        endCreateTime: null,
        processType: null,
        current: 1,
        size: 10,
        statusList: ["AWAIT_REVIEW"],
      },
      expand: false, // 展开搜索
      acTime: null,
      treatmentArray: [],
      Loading: false,
      counts: [{ toReceive: 0 }], // 红点标签
      tableType: "1", // 表格类型（状态）
      tabList: [],
      total: 0,
      logistics: [], // 物流商
    };
  },
  computed: {
    // 仓库地址
    ...mapState(["clientWareHouse"]),
  },

  methods: {
    //select根据输入筛选，符合返回true
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //时间选择
    onStartDateChange(date, dateString) {
      console.log(dateString);
      this.searchData.startCreateTime = dateString[0];
      this.searchData.endCreateTime = dateString[1];
    },
    //获取推退件方式下拉框选择值
    async getSelection() {
      let { code, responseBody } = await by_retreat_applyProcess_type();
      if (code === "200") {
        this.treatmentArray = responseBody;
      }
    },
    //页码变更
    showChange(current, size) {
      // this.searchData.page = size;
      this.searchData.size = size;
      this.getList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getList();
    },
    // 弹框
    showModal(id) {
      this.getlogiSelection();
      this.$refs.AddEditModal.infoShow(id);
    },
    //标签页切换
    callback(type) {
      // this.searchData.page = 1;
      // this.searchData.type = type;
      this.tableType = type;
      switch (type) {
        case "1":
          this.searchData.statusList = ["AWAIT_REVIEW"];
          break;
        case "2":
          this.searchData.statusList = ["AWAIT_RECEIVE"];
          break;
        case "3":
          this.searchData.statusList = ["AWAIT_CONFIRM"];
          break;
        case "4":
          this.searchData.statusList = ["RECEIVED"];
          break;
        case "5":
          this.searchData.statusList = ["FINISH"];
          break;
        case "6":
          this.searchData.statusList = ["CANCEL"];
          break;
        case "7":
          this.searchData.statusList = ["AUDIT_FAIL"];
          break;
        case "8":
          this.searchData.statusList = ["CLOSED"];
          break;
      }
      this.getList();
    },
    getTableList() {},
    getCountList() {},
    search() {
      this.searchData.current = 1;
      this.getList();
    },
    resetSearch() {
      this.searchData.waybillNm = null;
      this.searchData.applyCode = null;
      this.searchData.warehouseId = null;
      this.searchData.startDate = null;
      this.searchData.endtDate = null;
      this.searchData.typeId = null;
      this.acTime = null;
      this.getList();
    },
    async getList() {
      this.Loading = true;
      const { code, responseBody } = await by_retreatApply_Query(
        this.searchData
      );
      this.Loading = false;
      if (code == 200) {
        console.log(responseBody);
        this.total = parseInt(responseBody.total);
        this.tabList = responseBody.records;
      }
    },
    // 获取物流商
    async getlogiSelection() {
      let res = await treeTagDictionary({
        tagType: 4,
      });
      if (res.code === "200") {
        this.logistics = res.responseBody;
      }
    },
  },
  created() {
    this.getSelection();
    // 仓库默认待接收
    if (sessionStorage.getItem("accType") == 3) {
      this.searchData.statusList = ["AWAIT_RECEIVE"];
      this.tableType = 2;
    }
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
/deep/.blueBtn {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
</style>